<template>
  <el-menu
      :default-active="defaultRoute"
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical"
      text-color="#fff"
      style="height: 100vh;"
      :router="true"
      :collapse="isCollapse"
  >
    <MenuItem :menuData='menuData'/>
  </el-menu>
</template>

<script setup>
import MenuItem from './MenuItem.vue'
import {useRoute} from 'vue-router'
import {computed, ref} from "vue";
let menuData = ref([
	{
		title: '文件管理',
		icon: 'briefcase',
		children: [
			{
				title: '文件列表',
				index: '/file/index',
				icon: 'briefcase'
			},
		]
	},
  {
    title: '水印管理',
		icon: 'files',
    children: [
      {
        title: '加水印管理',
        index: '/watermark/list',
				icon: 'files'
      },
			{
				title: '水印检出管理',
				index: '/watermark/checklist',
				icon: 'document'
			},
    ]
  },
  {
    title: '设置',
		icon: 'user',
    children: [
			{
				title: '用户管理',
				index: '/setting/userlist',
				icon: 'user'
			},
      {
        title: '修改密码',
        index: '/setting/updatepassword',
				icon: 'key'
      },
    ]
  },
])
let route = useRoute()
let defaultRoute = computed(() =>{
  return route.path
})
let isCollapse = ref(false)
let handleOpen = () =>{
  isCollapse.value = false
}
let handleClose = () =>{
  isCollapse.value = true
}

defineExpose({
  handleOpen,
  handleClose
})
</script>

<style scoped>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 110vh;
}
</style>
